<template>
  <div class="setting-more">
    <!-- setting-more -->
    <div class="set-more-left">
      <div v-if="false" class="weixin-box sha1">
        <img :src="`${env.publicPath}images/wx-2.jpg`" alt="">
        <div class="weixin-box-con">
          <img :src="`${env.publicPath}images/produ-1.jpg`" alt="">
          <img :src="`${env.publicPath}images/produ-1.jpg`" alt="">
        </div>
        <div class="weixin-box-bottom">
          <div class="weixin-box-bottom-bg"
            :style="{height: bottomTabStyle.height,
            backgroundColor: bottomTabStyle.backgroundColor,
            opacity: bottomTabStyle.opacity,
            backgroundImage: bottomTabStyle.backgroundImage}"></div>
          <div class="weixin-box-bottom-btns">
            <a href="javascript:;">
              <i class="jy-icon-prompt-correct"></i>
              <span>click</span>
            </a>
            <a href="javascript:;">
              <i class="jy-icon-empty"></i>
              <span>click</span>
            </a>
          </div>
        </div>
      </div>
    </div>

    <div class="set-more-right">
      <div class="more-box more-appkey">
        <el-checkbox @change="click2CheckWbAppKey" v-model="siteAttr.bIsWbAppkeyChecked">微博AppKey</el-checkbox>
        <div class="more-appkey-input" v-show="siteAttr.bIsWbAppkeyChecked">
          <span>Key值</span>
          <input class="more-appkey-el-input" type="text" placeholder="请输入微博 AppKey 值" v-model="siteAttr.wb_appkey">
        </div>
        <p class="app-key-info"><a target="_blank" href="https://open.xxx.com/connect">https://open.xxx.com/connect </a> 到此地址申请AppKey，如添加内部白名单接口，<br>请发邮件<a href="mailto:zhouheng1@staff.xxx.com"> zhouheng1@staff.xxx.com </a>（周恒）申请开通</p>
      </div>

      <div v-if="false" class="more-box more-autoplay">
        <el-checkbox v-model="bIsStayTimeChecked">页面自动播放</el-checkbox>
        <p v-show="bIsStayTimeChecked" class="more-box-slider">
          <el-slider
            class="more-box-slider-cls more-stay-time"
            v-model="siteAttr.stayTime"
            show-input>
          </el-slider>
          <span>每页场景停留的时间</span>
        </p>
      </div>

      <div v-if="false" class="more-box more-bottomtab">
        <el-checkbox v-model="bIsTabHeightChecked">底部菜单栏</el-checkbox>
        <p v-show="bIsTabHeightChecked" class="more-box-slider">
          <el-slider
            class="more-box-slider-cls"
            v-model="tabHeight"
            show-input>
          </el-slider>
          <span>菜单栏高度设置</span>
        </p>
      </div>

      <div v-if="false" class="more-box more-tabbg">
        <div class="more-tabbg-img">
          <i class="jy-icon-addition"></i>
          <a href="javascript:;">添加菜单栏背景图</a>
        </div>

        <div class="more-tabbg-rgba">
          <p class="more-tabbg-rgb"> <label>纯色背景</label><el-color-picker v-model="bgColor"></el-color-picker> </p>
          <p class="more-tabbg-alp">
            <label>透明度</label>
            <el-slider
              class="more-box-slider-cls more-tabbg-alp-silder"
              v-model="bgOpacity"
              show-input>
            </el-slider>
          </p>
        </div>
      </div>

      <div v-if="false" class="more-box more-tablist">
        <p class="more-tablist-title"> <label>菜单栏按钮</label> </p>
        <div class="more-tablist-lists"
          :key="index"
          v-for="(item, index) in btnLists">
          <div class="item-header">
            <i>
              <img :src="item.pic" alt="">
            </i>
            <a href="javascript:;">点击更换</a>
          </div>
          <div class="item-option">
            <p class="item-option-title">
              <el-input placeholder="请输入内容" v-model="item.title"></el-input>
            </p>
            <p class="item-option-link">
              <el-input placeholder="请输入内容" v-model="item.link" class="item-option-link-input">
                <template #prepend>
                  <el-select v-model="select" placeholder="请选择">
                    <el-option label="餐厅名" value="1"></el-option>
                    <el-option label="订单号" value="2"></el-option>
                    <el-option label="用户电话" value="3"></el-option>
                  </el-select>
                </template>
              </el-input>
            </p>
          </div>
          <div class="item-handle">
            <i class="jy-icon-layer-closed"></i>
            <i class="jy-icon-arrow-up"></i>
            <i class="jy-icon-arrow-down"></i>
          </div>
        </div>
        <p class="more-tablist-add">
          <a href="javascript:;" @click.stop="click2AddBtn">添加按钮</a>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapState, mapActions } from 'vuex'
  import { reactive } from 'vue'
  
  export default {
    setup () {
      const state =  reactive({
        select: '',
        btnLists: [],
        // siteAttr
        bIsStayTimeChecked: false,  // auto play
        siteAttr: {
          wb_appkey: '',  // wb appkey
          bIsWbAppkeyChecked: true,  // wb appkey
          stayTime: 3,
        },
        bIsTabHeightChecked: false,
      })
      const state_ = {
        tabHeight: 36,
        bgColor: '#000000',
        bgOpacity: 90,
        bottomTabStyle: {
          height: 'auto',
          backgroundColor: '#000000',
          opacity: 1,
          backgroundImage: 'initial',
        },
        bgImage: 'initial',
      }
      _.merge(state, state_)
      return state
    },
    computed: {
      ...mapState({
        siteAttrs: (state) => state.components.attrs,
      }),
    },
    mounted() {
      this.siteAttr = _.cloneDeep(this.siteAttrs);
    },
    methods: {
      ...mapActions('components', {
        updateSettingMore: 'updateSettingMore',
      }),
      click2AddBtn() {
        // console.log(e);
        let option = {
          pic: this.env.publicPath + '/images/btn-0.jpg',
          title: '',
          link: '',
        };
        this.btnLists.push(option);
      },
      click2CheckWbAppKey() {
        this.siteAttr.wb_appkey = '';
      },
    },
    watch: {
      tabHeight(newVal) {
        // console.log(newVal);
        if(this.bIsTabHeightChecked) {
          this.bottomTabStyle.height = newVal + 'px !important';
        }
      },
      bIsTabHeightChecked(newVal) {
        // console.log(newVal);
        if(!newVal) this.bottomTabStyle.height = 'initial';
        else this.bottomTabStyle.height = this.tabHeight + 'px !important';
      },
      bgColor(newVal) {
        // console.log(newVal);
        this.bottomTabStyle.backgroundColor = newVal;
        this.bottomTabStyle.backgroundImage = 'initial';
      },
      bgOpacity(newVal) {
        // console.log(newVal);
        this.bottomTabStyle.opacity = newVal*0.01 + ' !important';
      },
      bgImage(newVal) {
        // console.log(newVal);
        this.bottomTabStyle.backgroundImage = 'url(' + newVal + ')';
        this.bottomTabStyle.backgroundColor = 'initial';
      },
      bottomTabStyle: {
        // handler: function(newVal) {
        //   // console.log(newVal);
        // },
        // deep: true,
      },
      siteAttr: {
        handler(newVal) {
          this.updateSettingMore(newVal);
        },
        deep: true,
      },
    },
  }
</script>

<style lang="scss">
  .setting-more{
    position: relative;
    display: flex;
  }

  .set-more-left{
    position: relative;
    width: 1px;
    height: 517px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #E4E7EB;
  }

  .set-more-right{
    position: relative;
    min-width: 0;
    max-height: 517px;
    overflow: auto;
    flex: 1;
    padding-top: 20px;

    .more-box{
      padding: 0 37px;
      margin-bottom: 25px;

      .more-box-slider{
        position: relative;
        display: flex;

        .more-box-slider-cls{
          position: relative;
          width: 348px;

          .el-slider__input{
            width: 80px !important;

            span{
              display: none !important;
            }

            input{
              padding: 0 12px;
            }
          }

          .el-slider__runway{
            margin-right: 120px;
          }
        }

        span{
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #A5AFBE;
          margin-left: 16px;
        }
      }

      .more-stay-time::before{
        position: absolute;
        display: flex;
        align-items: center;
        content: "s";
        font-size: 14px;
        color: #606266;
        height: 100%;
        right: 8px;
        top: 0;
        z-index: 1;
      }
    }

    .more-tabbg{
      display: flex;

      .more-tabbg-img{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 190px;
        height: 78px;
        border: 1px dashed #A5AFBE;
        border-radius: 2px;

        i{
          color: #A5AFBE;
          font-size: 20px;
          margin-top: 14px;
        }

        a{
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 30px;
          background: rgba(67, 71, 92, .7);
          font-size: 14px;
          color: #fff;
        }
      }

      .more-tabbg-rgba{
        position: relative;
        margin-left: 35px;
        flex: 1;

        p{
          display: flex;
          align-items: center;

          label{
            min-width: 60px;
            font-size: 14px;
            color: #43475C;
            margin-right: 15px;
          }
        }
        .more-tabbg-rgb{
          .el-color-picker{
            display: flex;
            align-items: center;

            .el-color-picker__trigger{
              width: 94px;
              height: 32px;
            }
          }
        }
        .more-tabbg-alp{
          position: relative;

          .more-box-slider-cls{
            flex: 1;

            .el-slider__input{
              width: 66px !important;

              span{
                display: none;
              }
              input{
                padding: 0 12px !important;
              }
            }
            .el-slider__runway{
              margin-right: 88px;
            }
          }
          .more-tabbg-alp-silder::before{
            position: absolute;
            display: flex;
            align-items: center;
            content: "%";
            font-size: 14px;
            color: #606266;
            height: 100%;
            right: 8px;
            top: 0;
            z-index: 1;
          }
        }
      }
    }

    .more-tablist{
      // display: flex;

      .more-tablist-title{
        font-size: 14px;
        color: #43475C;
        margin-bottom: 12px;
      }

      .more-tablist-lists{
        display: flex;
        margin-bottom: 12px;

        .item-header{
          position: relative;
          width: 64px;
          height: 64px;
          background: #F3F5FA;

          i{
            position: relative;
            width: 100%;
            height: 100%;
            z-index: 1;
            display: flex;
            justify-content: center;
            align-items: center;

            img{
              display: block;
              width: 36px;
              height: 36px;
              object-fit: cover;
            }
          }

          a{
            position: absolute;
            width: 100%;
            text-align: center;
            font-size: 12px;
            color: #fff;
            opacity: 0.7;
            background: #43475C;
            line-height: 1.5;
            z-index: 1;
            bottom: 0;
          }
        }

        .item-handle{
          position: relative;
          display: flex;
          width: 16px;
          height: 64px;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          margin-left: 8px;

          i{
            font-size: 12px;
          }
        }

        .item-option{
          position: relative;
          min-width: 0;
          width: 100%;
          height: 64px;
          flex: 1;
          margin-left: 10px;
          display: flex;flex-direction: column;
          justify-content: space-between;

          .item-option-title{
            .el-input{
              input{
                height: 30px !important;
              }
            }
          }

          .item-option-link{
            .item-option-link-input{
              input{
                height: 30px !important;
              }
            }

            .el-select{
              width: 88px;

              .el-input__suffix{
                display: flex;
                align-items: center;
              }
            }
          }
        }
      }

      .more-tablist-add{
        position: relative;
        display: flex;
        justify-content: center;

        a{
          font-size: 14px;
          color: #fff;
          line-height: 20px;
          padding: 5px 30px;
          background: #127BFF;
          border-radius: 2px;
        }
      }
    }

    .more-appkey{

      .more-appkey-input{
        display: flex;
        align-items: center;
        padding: 12px 0;

        span{
          font-size: 12px;
          color: #43475C;
          width: 52px;
          margin-right: 14px;

          i{
            color: #A5AFBE;
          }
        }

        .more-appkey-el-input{
          font-size: 12px;
          padding: 0 12px;
          line-height: 30px;
          color: #606266;
          border-radius: 4px;
          outline: none;
          border: 1px solid #dcdfe6;
          min-width: 0;
          flex-grow: 1;
        }
        .more-appkey-el-input:focus{
          border-color: #127BFF;
        }
      }

      .more-appkey-tips{
        line-height: 1;
        font-size: .12rem;

        a{
          color: #1077ED;
        }
        span{
          color: #A5AFBE;
          padding: 0 10px;
        }
      }
    }
  }

  .weixin-box{
    position: relative;
    width: 257px;
    height: 475px;
    display: flex;
    flex-direction: column;
    background: #EBEBEB;

    .weixin-box-con{
      position: relative;
      width: 100%;
      min-height: 0;
      overflow: auto;
      flex: 1;
    }
    .weixin-box-con::-webkit-scrollbar{
      width: 1px;
    }
    .weixin-box-bottom{
      position: absolute;
      display: flex;
      left: 0;
      bottom: 0;
      width: 100%;
      height: auto;
      // background: rgba(0, 0, 0, .8);
      transition: height 1s ease-in-out;

      .weixin-box-bottom-bg{
        position: relative;
        z-index: 1;
        width: 100%;
        height: 36px !important;
      }
      .weixin-box-bottom-btns{
        position: absolute;
        display: flex;
        z-index: 2;
        width: 100%;
        height: 100%;

        a{
          position: relative;
          display: flex;
          z-index: 2;
          height: 100%;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          flex: 1;
          color: #fff;

          i{
            font-size: 16px;
          }
          span{
            font-size: 12px;
            line-height: 16px;
          }
        }
      }
    }

    img{
      display: block;
      width: 100%;
      height: auto;
    }
  }
</style>
